<script setup>
import { ref } from 'vue'
const activeIndex = ref(0)
const emit = defineEmits(['change'])
const props = defineProps({
  data: {
    type: Array,
    default() {
      return [{ name: 'tab1' }, { name: 'tab2' }]
    },
  },
  mainColor: {
    type: String,
    default: '#EA5404',
  },
  bgColor: {
    type: String,
    default: '#FCE7DC',
  },
  borderColor: {
    type: String,
    default: 'rgba(234, 85, 6, 0.32)',
  },
  type: {
    type: String,
    default: 'default',
  },
  height: {
    type: Number,
    default: 100,
  },
  radius: {
    type: Number,
    default: 6,
  },
})
const setIndex = (index) => {
  activeIndex.value = index
  emit('change', index)
}
</script>

<template>
  <view class="fes-tabs" :style="{ borderRadius: props.radius + 'rpx' }">
    <view
      v-if="props.type == 'btn'"
      class="tab"
      :style="{
        background: activeIndex == index ? props.mainColor : '#ffffff',
        color: activeIndex == index ? '#ffffff' : '#000000',
      }"
      v-for="(item, index) in props.data"
      :key="index"
      @click="setIndex(index)"
    >
      {{ item.typeName }}
    </view>
    <view
      v-if="props.type == 'line'"
      class="tab-line"
      :style="{
        color: activeIndex == index ? props.mainColor : '',
        height: props.height + 'rpx',
      }"
      v-for="(item, index) in props.data"
      :key="index"
      @click="setIndex(index)"
    >
      {{ item.typeName }}
      <view class="selected-bar" v-if="activeIndex === index"></view>
    </view>
    <view
      v-if="props.type == 'default'"
      class="tab-default"
      :style="{
        background: activeIndex == index ? props.bgColor : '',
        borderColor: activeIndex == index ? props.borderColor : '',
      }"
      v-for="(item, index) in props.data"
      :key="index"
      @click="setIndex(index)"
    >
      {{ item.typeName }}
    </view>
  </view>
</template>

<style lang="scss" scoped>
.fes-tabs {
  display: flex;
  justify-content: center;
  overflow: hidden;
  .tab {
    padding: 20rpx 30rpx;
    background: #ffffff;
    backdrop-filter: blur(4px);
    font-size: 24rpx;
    font-weight: 400;
    color: #000000;
  }
  .tab-line {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #ffffff;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
    .selected-bar {
      position: absolute;
      bottom: 26rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 56rpx;
      height: 4rpx;
      border-radius: 2rpx;
      background: #ec5e13;
    }
  }
  .tab-default {
    padding: 12rpx 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    font-weight: 400;
    color: #000000;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.27);
  }
  .tab-default:first-child {
    border-right: none;
  }
  .tab-default:last-child {
    border-left: none;
  }
}
</style>
